import { Modal, Form, Input, Button } from 'antd';
import React, { useEffect, FC } from 'react';
import {SingleUserType, FormValues} from '../data.d'

interface UserModelProps {
  visible: boolean;
  record: SingleUserType | undefined;
  closeHandler: () => void;
  onFinish: (values: FormValues) => void;
}

const UserModal: FC<UserModelProps> = (props) => {
  const [form] = Form.useForm();
  const {visible, record, closeHandler, onFinish} = props;

  useEffect(() => {
    if (record === undefined)
      form.resetFields();
    else
      form.setFieldsValue(record);
  }, [visible]);

  const onOk = () => {
    form.submit();
  };

  const onFinishFailed = (errorInfo: any) => {

  };

  return (
    <div>
      <Modal
        title="Basic Modal"
        visible={visible}
        onOk={onOk}
        onCancel={closeHandler}
        forceRender
      >
        {/*传过来的是对象，对象是不能直接显示，所以这种写法会报错*/}
        {/*{props.record}*/}
        {/*{JSON.stringify(props.record)}*/}

        <Form
          name="basic"
          form={form}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="Name"
            name="name"
            rules={[{ required: true, message: 'Please input your name!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="E-Mail"
            name="email"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Create Time"
            name="create_time"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Status"
            name="status"
          >
            <Input />
          </Form.Item>
        </Form>

      </Modal>
    </div>
  )
};

export default UserModal;
